<template>
  <div class="learun-header" :style="{
    height: `${lr_theme.headerHeight}px`,
    'padding-left': paddingLeft
  }">
    <header-logo v-if="!['side3'].includes(lr_theme.nav)" ref="topLogo" />
    <div v-else class="learun-header__collapse" @click="setCollapse">
      <i :class="lr_isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'"></i>
    </div>
    <div v-if="['mix', 'top'].includes(lr_theme.nav)" class="top-menu">
      <my-menu mode="horizontal" isAutoWidth :onlyFirstMenu="['mix'].includes(lr_theme.nav)" :popperClass="popperClass"
        :type="menuType" />
    </div>

    <div class="right-bar">





      <el-dropdown>
        <div class="el-dropdown-link learun-header--icon-btn noBg">
          <el-avatar :size="24" :src="avatar">
            {{ loginInfo.f_Account && loginInfo.f_Account.slice(0, 2) }}
          </el-avatar>
        </div>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item disabled>
            <div>
              <div style="font-size: 14px; color: #333">
                {{ loginInfo.f_RealName }}
              </div>
              <div style="font-size: 12px">
                {{ $t("login：") }}:{{ loginInfo.f_Account }}
              </div>

            </div>
          </el-dropdown-item>
          <el-dropdown-item divided @click.native="handleUseInfo">
            {{ $t("UserInfo") }}
          </el-dropdown-item>
          <el-dropdown-item @click.native="handleRemoveCache">
            {{ $t("RemoveCache") }}
          </el-dropdown-item>

          <el-dropdown-item @click.native="logout" divided>{{
            $t("LogOut")
          }}</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>


  </div>
</template>
<script>
import { mapGetters } from "vuex";
import { fullscreenToggel, listenfullscreen } from "../../../util/util";

import HeaderLogo from "./logo";



import Theme from "./theme";

import MyMenu from "../menu/menu";

export default {
  components: {
    HeaderLogo,
    Theme,


    MyMenu,
  },
  provide() {
    return {
      top: this,
    };
  },
  data() {
    return {
      frameworkVisible: false,
      frameworkSettingVisible: false,
    };
  },
  mounted() {
    listenfullscreen(this.setScreen);
  },
  computed: {
    ...mapGetters(["isFullScren", "modulesGroup"]),
    avatar: function () {
      return this.loginInfo.f_HeadIcon
        ? `${this.apiUrl}system/annexesfile/${this.loginInfo.f_HeadIcon}?token=${this.token}`
        : ``;
    },
    popperClass() {
      return "learun-more-light-el-menu learun-more-light-top-el-menu";
    },
    tipEffect() {
      if (
        ["side2"].includes(this.lr_theme.nav) ||
        ["white"].includes(this.lr_theme.colorType)
      ) {
        return "dark";
      } else {
        return "light";
      }
    },
    menuType() {
      if (["white"].includes(this.lr_theme.colorType)) {
        return "light";
      } else {
        return "dark";
      }
    },
    paddingLeft() {
      if (["side3"].includes(this.lr_theme.nav)) {
        if (this.lr_isCollapse) {
          return "60px";
        } else {
          return `${this.lr_theme.sideWidth}px`;
        }
      }

      return '';
    },
  },
  methods: {
    setCollapse() {
      this.$store.commit("app/SET_COLLAPSE");
    },
    handleScreen() {
      fullscreenToggel();
    },
    setScreen() {
      this.$store.commit("app/SET_FULLSCREN");
    },

    handleRemoveCache() {
      this.$confirm(this.$t(" Do you confirm that you want to Clear cache?"), this.$t("Tips"), {
        confirmButtonText: this.$t("Confirm"),
        cancelButtonText: this.$t("Cancel"),
        type: "warning",
      })
        .then(async () => {
          await window.$api.organization.user.removeCache();
          location.reload();
        })
        .catch(() => { });
    },
    handleFramework() {
      this.frameworkVisible = true;
    },
    handleUseInfo() {
      this.$router.push({ path: "/organization/loginuser/index" });
    },
    logout() {
      this.$confirm(this.$t("Do you confirm that you want to exit the current system?"), this.$t("Tips"), {
        confirmButtonText: this.$t("confirm"),
        cancelButtonText: this.$t("cancel"),
        type: "warning",
      })
        .then(async () => {
          await this.$store.dispatch("organization/user/fedLogOut");
          this.$router.push({ path: "/login" });
        })
        .catch(() => { });
    },
    openLerun() {
      window.open(this.appConfig.url);
    },
  },
};
</script>
<style lang="scss" scoped>
.right-bar {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  padding-left: 60px;
}

.learun-framework-info {
  position: relative;
  padding: 16px;

  &__img {
    position: absolute;
    top: -68px;
    left: -68px;
    height: 416px;
  }

  &__content {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 280px;
    padding: 60px 32px 30px 0;
    text-align: right;
  }

  &__title {
    font-size: 20px;
    line-height: 20px;
    color: #262626;
  }

  &__version {
    margin-top: 14px;
    font-size: 14px;
    line-height: 20px;
    color: #8c8c8c;
  }

  &__footer {
    font-size: 12px;
    color: #8c8c8c;
    margin-top: 40px;
  }

  .el-button--primary {
    padding: 9px 0;
    width: 155px;
    margin-top: 32px;
    font-size: 12px;
    border-radius: 2px;
  }
}
</style>
